window.onload = function(){
    // 初始化变量
    var songData = null;
    var songUrl = null;
    var songID = null;
    var beforeSong = null;

    //获取节点
    var searchBtn = document.getElementById('searchBtn');
    var textKey = document.querySelector('#textKey');
    var audio = document.getElementsByTagName('audio')[0];
    var tbody = document.querySelector('tbody');
    var songListNode = null;

    AJAX('searchSongDate');

    // 注册歌曲列表的点击(播放)事件
    tbody.onclick = function(e){
        // 循环的作用是无论点击到表格tr中的哪个子元素都可以通过e.path找到tr节点，获取上面的songID属性节点值
        for(var i = 0; i < e.path.length; i++){
            if(e.path[i].nodeName == 'TR'){

                //从tr元素节点上获取到songID属性节点中的值
                songID = e.path[i].getAttribute('songID');

                //取消上一首歌曲的选中项样式（如果有的话）
                if(beforeSong != null){
                    beforeSong.classList.remove('playBG');
                    beforeSong.querySelector('i').classList.remove('icon');
                }

                //给用户点击的歌曲列表项添加选中样式(backgroundColor)
                e.path[i].classList.add('playBG');
                e.path[i].querySelector('i').classList.add('icon');

                //记录这个节点，方便用户点击其他歌曲的时候，取消掉上一首歌曲的选中样式
                beforeSong = e.path[i];
                break;
            }
        }//end for
        AJAX('searchSongUrl');
    }

    // 点击歌曲搜索按钮
    searchBtn.onclick = function(){
        AJAX('searchSongDate');
    }

    // 接收到的是歌曲数据,交给这个函数处理，生成歌曲列表，并为他们注册单击(播放)事件
    function createSongList(data){
        // 这里应该检查数据是否正常

        // 遍历数据，并创建节点
        // tbody = '<tr><th>歌曲</th><th>歌手</th><th>专辑</th></tr>';
        var count = 1;
        var newTableNode = '';
        for(var i = 0; i < data.length; i++){
            newTableNode += '<tr songID="'+ data[i].id +'">';
            newTableNode += '<td><span>'+ (count++) +'.</span>'+ data[i].name +'<i></i></td><td>'+ data[i].artists[0].name +'</td><td>'+ data[i].album.name +'</td>';
            newTableNode += '</tr>';
        }
        tbody.innerHTML = '<tr class="songTableHead"><th>歌曲</th><th>歌手</th><th>专辑</th></tr>' + newTableNode;
    
    
    
    }

    // 接收热评数据，生成热评列表
    function createHotList(data){
        console.log('热评处理函数=》',data);
        var hotComment = document.querySelector('.hotComment');
        
        // timestampToTime(songData.hotComments[i].time / 1000);//评论时间
        // songData.hotComments 数组  
        // songData.hotComments[index].content热评
        // songData.hotComments[index].user.nickname 用户名
        // songData.hotComments[index].user.avatarUrl 头像
        // 时间
        var newNode = '<ul>';
        for(var i = 0; i < data.length; i++){
            newNode += '<li>';
            newNode += '<img src="'+songData.hotComments[i].user.avatarUrl+'">';
            newNode += '<div class="uesr"><p class="userName">'+songData.hotComments[i].user.nickname+'</p>';
            newNode += '<p class="time">'+timestampToTime(songData.hotComments[i].time / 1000)+'</p></div>';
            newNode += '<p class="hotContent">'+songData.hotComments[i].content+'</p>';
            newNode += '</li>';
        }
        newNode += '</ul>';
        hotComment.innerHTML = newNode;
        console.log(hotComment);
    }
    
    
    function timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y+M+D+h+m+s;
    }





    //AJAX
    function AJAX(type){
        // 异步AJAX，创建 XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();

        // 回调函数
        xhr.onload = function(){
            // 输出接收到的数据
            songData = JSON.parse(xhr.responseText);

            switch(type){
                //查询歌曲列表
                case 'searchSongDate' :
                    // 接收到的是歌曲数据,交给这个函数处理，生成歌曲列表
                    createSongList(songData.result.songs);
                    break;
                
                //查询歌曲热评
                case 'hotComment' :
                    createHotList(songData.hotComments);
                    break;
                    //查询歌曲URL
                case 'searchSongUrl' :
                    console.log('歌曲url',songData.data[0].url);
                    audio.setAttribute('src', songData.data[0].url);
                    AJAX('hotComment');
                    break;
            }

            console.log('接收到的数据', songData);
        }

        // 发送请求，根据type参数来获取歌曲信息、歌曲URL、热评
        switch(type){
            //查询歌曲列表
            case 'searchSongDate' :
                xhr.open('GET', 'https://autumnfish.cn/search?keywords=' + textKey.value);
                break;
            //查询歌曲URL
            case 'searchSongUrl' :
                xhr.open('GET', 'https://autumnfish.cn/song/url?id='  + songID);
                break;
            //查询歌曲热评
            case 'hotComment' :
                xhr.open('GET', 'https://autumnfish.cn/comment/hot?type=0&id='  + songID);
                break;
        }
        xhr.send();
    }

    // 播放

    // 菜单按钮点击
    var menu = document.querySelector('.menu');
    menu.onclick = function(){
        playLayer.classList.add('hidden');
    }

    var playLayer = document.querySelector('.playLayer')
    playLayer.onclick = function() {
        playLayer.classList.remove('hidden');
    }
    // 歌曲列表和热评左右滑动事件
    // var songDiv = document.querySelector('.songDiv');
    // songDiv.onscroll = function(){
    //     console.log(songDiv.scrollLeft);
    // }
}






